import React from 'react';
import { Modal, Button } from 'antd';
import './styles/chat-window.less';
import { useTranslation } from 'react-i18next';

interface WaitingBoxProps {
	visible?: boolean;
	media?: string;
	onCancel: (media?: string) => void;
}

const WaitingBox = (props: WaitingBoxProps) => {
	const { t } = useTranslation();
	const { visible, onCancel, media } = props;
	return (
		<Modal
			open={visible}
			className="widget-waiting-box-container"
			centered={true}
			closable={false}
			width={309}
			footer={[
				<Button
					className="button"
					onClick={() => {
						onCancel(media);
					}}
					key="button"
				>
					{t('cancel')}
				</Button>
			]}
		>
			<p className="loading" />
			<p className="waiting-text">{t('waiting-response')}</p>
		</Modal>
	);
};

export default WaitingBox;
